<template>
	<VideoBox>
		<template #content>
			<view class="outBox">
				<u-navbar leftText="拼卡" leftIconColor="#fff" :autoBack="true" bgColor="rgba(0, 0, 0, 0.6)">
					<view class="left-slot" slot="left">
						<u-icon name="arrow-left" color="#fff"></u-icon>
						<text>{{ '拼卡' }}</text>
					</view>
				</u-navbar>
				<view class="innerCont">
					<div class="btns">
						<view :class="['btnOut',btnType == 1 ? 'btnOut2' : '']">
							<view class="btn" @click="getData(1)">
								<text>申请拼卡</text>
							</view>
						</view>
						<view :class="['btnOut',btnType == 2 ? 'btnOut2' : '']">
							<view class="btn" @click="getData(2	)">
								<text>我申请的拼卡</text>
							</view>
						</view>
					</div>
					<view class="items" v-if="btnType == 1">
						<scroll-view :scroll-y="true" >
							<view class="item" v-for="item in dataList" :style="{
								backgroundImage:`url(${getImgUrl('cardCombination/pic6.png')})`
							}" @click="getnav('/pages/mine/cardCombination/details?id=' + item.id)">
								<view class="top">
									<view class="left">
										<view class="title">{{item.counterNo}}：{{item.shareName}}</view>
										<view class="stateBox">
											<view class="state">
												<text>{{getShareParticipateStatus(item)}}</text>
											</view>
										</view>
										<view class="time">{{item.createTime}}</view>
										<view class="time">
											女生：<view class="price">
												{{item.girlPrice}}元
											</view>
											男生：<view class="price">
												{{item.boyPrice}}元
											</view>
										</view>
									</view>
									<!-- 	<view class="right">
									
									</view> -->
								</view>
								<scroll-view :scroll-x="true" class="scrollView">
									<view class="users" :class="item.participants.length >= 8 ? 'noCenter' : ''">
										<view class="img" v-for="user in item.participants">
											<image :src="user.avatar" mode="scaleToFill"></image>
										</view>
									</view>
								</scroll-view>
							</view>

						</scroll-view>
					</view>

					<div class="mine" v-else>
						<div class="topBox">
							<div class="lines">
								<div @click="getData(2,1)" :class="['line',btnType2 == 1 ? 'active' : '']">
									我今日申请的拼卡
								</div>
								<div @click="getData(2,2)" :class="['line',btnType2 == 2 ? 'active' : '']">
									历史申请的拼卡
								</div>
							</div>
							<view class="selectTime" v-if="btnType2 == 2">
								<ep-select v-model="selectTime" :options="options" @change="changeTime"></ep-select>
							</view>
						</div>
						<scroll-view :scroll-y="true" style="height: 62vh;">
							<view class="items items3 items4">
								<view class="item" @click="handleDetails(item)" v-for="item in dataList" :style="{
									backgroundImage:`url(${getImgUrl('cardCombination/pic9.png')})`
								  }">
									<view class="title">卡台号{{item.counterNo}}</view>

									<view class="statusBox">
										<view class="state"
											:class="item.shareAuditStatus == 3 ? 'state2'  : item.shareAuditStatus == 0 ? 'state3' : ''">
											<text>{{item.shareAuditStatus == 3 ? '已结束' : item.shareAuditStatus == 0 ? '待审核' : '进行中'}}</text>
										</view>
									</view>
									<div class="time">
										<text>{{formatDateTime(item.createTime)}}</text>
									</div>
									<view class="bottom">
										<view class="tips">
											<view class="tip tip2">
												<text>已参与</text>
												<text>{{item.num || 0}}人</text>
											</view>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</div>
				</view>
			</view>
			<!-- <Tabbar :currentTab="1"></Tabbar> -->
			<userLogin ref="userLoginRef" />
		</template>
	</VideoBox>
</template>

<script>
	import VideoBox from "@/components/VideoBox/index.vue"
	import {
		getImgUrl,
		getImgUrlLocal,
		getWXStatusHeight
	} from "@/utils";
	import {
		getOrderParticipateShareCounterApi,
		getMyJoinedOrderShareApi
	} from "@/api/api";
	import Tabbar from "@/components/tabbar.vue";

	export default {
		components: {
			Tabbar,
			VideoBox
		},
		onLoad() {
			let obj = getWXStatusHeight()
			this.menuHeight = obj.menuHeight
		},
		onPullDownRefresh() {
			this.getData()
		},
		onShow() {
			this.dataList = []
			this.getData()
			this.generatePastMonths()
		},
		data() {
			return {
				menuHeight: 0,
				dataList: [],
				btnType: 1,
				btnType2: 1,
				isDone: false,
				total: 0,
				pageParams: {
					pageSize: 500,
					pageNum: 1,
				},
				selectTime: '',
				options: [],
			}
		},
		async onReachBottom() {
			if (this.total <= this.dataList.length) {
				this.isDone = true
			}
			if (this.isDone) return

			this.pageParams.pageNum += 1
			this.getData()
		},
		methods: {
			getImgUrlLocal,
			getImgUrl,
			handleDetails(item) {
				if (item.isDone == 1) return
				this.getnav('/pages/mine/cardCombination/details?id=' + item.id)
			},
			changeTime(e) {
				this.selectTime = e
				this.dataList = []
				this.getData()
			},
			formatDateTime(dateString) {
				const date = new Date(dateString);
				return `${date.getFullYear()}-${
			    String(date.getMonth() + 1).padStart(2, '0')}-${
			    String(date.getDate()).padStart(2, '0')} ${
			    String(date.getHours()).padStart(2, '0')}:${
			    String(date.getMinutes()).padStart(2, '0')}:${
			    String(date.getSeconds()).padStart(2, '0')}`;
			},
			generatePastMonths() {
				const currentDate = new Date();
				const currentYear = currentDate.getFullYear();
				const currentMonth = currentDate.getMonth() + 1; // 月份从 0 开始，所以要加 1

				const months = [];

				for (let month = currentMonth; month >= 1; month--) {
					// 确保月份是两位数格式
					const formattedMonth = month.toString().padStart(2, '0');
					months.push(`${currentYear}-${formattedMonth}`);
				}

				this.options = months.map(item => {
					return {
						value: item,
						label: item
					}
				})

				this.selectTime = this.options[0].value
			},
			getShareParticipateStatus(item) {
				if (item.auditStatus == null) {
					return '进行中'
				} else if (item.isDone == 1) {
					return '已结束'
				} else if (item.shareParticipateInStatus == 1) {
					return '已进场'
				} else if (item.shareParticipateInStatus == 2) {
					return '已离场'
				} else if (item.paymentStatus == 1) {
					return '已付款'
				} else if (item.auditStatus == 0) {
					return '已申请'
				} else if (item.auditStatus == 1) {
					return '已通过'
				} else if (item.auditStatus == 2) {
					return '已拒绝'
				} else if (item.auditStatus == 3) {
					return '已踢出'
				}
			},
			async getData(type, val) {
				// const res = await getOrderParticipateShareCounterApi()
				// if (res.code == 200) {
				// 	this.dataList = res.rows.map(item => {
				// 		item.participants.unshift({
				// 			avatar: item.createUserAvatar
				// 		})
				// 		return item
				// 	})
				// 	console.log(this.dataList, "this.dataList");
				// }
				if (type) {
					this.btnType = type
					this.dataList = []
					if (val) {
						this.btnType2 = val
					}
				}
				let res = ''
				if (this.btnType == 2) {
					if (this.btnType2 == 2) {
						this.pageParams.month = this.selectTime
					} else {
						this.pageParams.month = ''
					}
					res = await getMyJoinedOrderShareApi(this.pageParams)
					if (res.code == 200) {
						this.dataList.push(...res.rows)
						this.total = res.total
					}
				} else {
					res = await getOrderParticipateShareCounterApi()
					if (res.code == 200) {
						this.dataList = res.rows.map(item => {
							item.participants.unshift({
								avatar: item.createUserAvatar
							})
							return item
						})
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.items2 {
		.item {
			padding: 48rpx 40rpx;
			margin-bottom: 16rpx;
			background-size: 100% 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				.top {
					display: flex;

					.name {
						font-weight: 500;
						font-size: 36rpx;
						color: #FFFFFF;
					}

					.num {
						width: 100rpx;
						height: 40rpx;
						background: #0FC6C2;
						border-radius: 14rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-right: 20rpx;
						margin-bottom: 24rpx;

						text {
							font-weight: 500;
							font-size: 24rpx;
							color: #FFFFFF;
							line-height: 24rpx;
						}
					}
				}

				.bottom {
					.tip {
						text {
							&:nth-child(1) {
								font-weight: 500;
								font-size: 28rpx;
								color: #86909C;
								margin-right: 20rpx;
							}

							&:nth-child(2) {
								font-weight: 500;
								font-size: 28rpx;
								color: #fff;
							}
						}
					}
				}
			}

			.right {
				.state {
					width: 100rpx;
					height: 40rpx;
					border-radius: 14rpx;
					background: rgba(255, 96, 72, .3);
					border: 2rpx solid #FF6048;
					display: flex;
					align-content: center;
					justify-content: center;

					text {
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #FF6048;
					}
				}

				.state2 {
					width: 100rpx;
					height: 40rpx;
					background: rgba(134, 144, 156, 0.3);
					border-radius: 14rpx;
					border: 2rpx solid #86909C;
					display: flex;
					align-content: center;
					justify-content: center;

					text {
						font-weight: 500;
						font-size: 24rpx;
						color: #86909C;
					}
				}
			}
		}

	}

	.items3 {

		// height: calc(100vh - 500rpx);
		.item {
			// padding: 48rpx 40rpx;
			margin-bottom: 16rpx;
			background-size: 100% 100%;
			height: 560rpx !important;

			.time {
				font-weight: 500;
				font-size: 28rpx;
				color: #86909C;
				text-align: center;
			}

			.title {
				margin-top: 230rpx;
				text-align: center;
				font-weight: 400;
				font-size: 60rpx;
				color: #000000;
				text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
				font-family: 'chunlian';
				margin-bottom: 20rpx;
				line-height: 72rpx;
			}

			.statusBox {
				display: flex;
				justify-content: center;
			}

			.state {
				width: 100rpx;
				height: 40rpx;
				// background: rgba(255, 96, 72, 0.5);
				border-radius: 14rpx;
				font-size: 24rpx;
				margin-top: 44rpx;
				border: 2rpx solid #FF6048;
				margin-top: 5rpx;
				margin-left: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #FF6048;
				margin-bottom: 20rpx;
			}

			.name {
				display: flex;
			}

			.bottom {
				margin-top: 26rpx;

				.tips {
					display: flex;
					justify-content: center;
				}

				.tip {
					margin-right: 20rpx;
					display: flex;
					flex-direction: column;

					text {
						&:nth-child(1) {
							font-weight: 500;
							font-size: 28rpx;
							color: #86909C;
							margin-right: 20rpx;
						}

						&:nth-child(2) {
							font-weight: 500;
							font-size: 28rpx;
							color: #fff;
							text-align: center;
						}
					}
				}

				.tip2 {
					display: flex;
					flex-direction: row;
				}
			}

		}

	}


	.topBox {
		display: flex;
		justify-content: space-between;

		.lines {
			display: flex;
			flex: 1;
			width: 100%;
			position: relative;
			margin-bottom: 50rpx;
			margin-top: 10rpx;

			.line {
				flex: 1;
				text-align: center;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 44rpx;

				&:nth-child(1) {
					margin-right: 20rpx;
				}
			}

			.active {
				position: relative;

				&::after {
					width: 100%;
					height: 6rpx;
					background: linear-gradient(297deg, #ADFC46 0%, #0FC6C2 100%);
					border-radius: 4rpx 4rpx 4rpx 4rpx;
					content: "";
					position: absolute;
					bottom: -30rpx;
					left: 0;
				}
			}

			&::after {
				content: "";
				position: absolute;
				bottom: -30rpx;
				width: 100%;
				height: 6rpx;
				background: rgba(255, 255, 255, 0.14);
				backdrop-filter: blur(10px);
				// border-radius: 4rpx 4rpx 4rpx 4rpx;
				// opacity: 0.51;
			}
		}

		.selectTime {
			width: 200rpx;
		}
	}

	.btns {
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;

		.btnOut {
			flex: 1;
			border-radius: 64rpx;
			box-shadow: 0rpx 0rpx 40rpx 38rpx rgba(195, 200, 203, 0.25);
			margin-right: 50rpx;
			height: 90rpx;

			&:last-child {
				margin-right: 0;
			}

			.btn {
				background-color: #4d5d66;
			}
		}

		.btnOut2 {
			box-shadow: inset 0rpx 12rpx 50rpx 0rpx #FFFFFF;

			.btn {
				background: linear-gradient(291deg, #0FC6C2 0%, #BEFF02 100%), radial-gradient(104% 104% at 94% 121%, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%), radial-gradient(135% 135% at 5% 15%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
			}
		}

		.btn {
			width: 100%;
			font-weight: 600;
			font-size: 36rpx;
			color: #FFFFFF;
			line-height: 90rpx;
			text-align: center;
			border-radius: 64rpx;
			box-shadow: inset 0rpx 14rpx 34rpx 0rpx #FFFFFF;
		}
	}

	.scrollView {
		margin-top: 36rpx;
	}

	.users {
		display: flex;
		/* 防止子元素被压缩 */
		flex-shrink: 0;
		justify-content: center;

		.img {
			width: 100rpx;
			height: 100rpx;
			border: 4rpx solid #fff;
			border-radius: 50rpx;
			margin-left: -30rpx;
			overflow: hidden;
			flex-shrink: 0;

			/* 关键：防止项目被压缩 */
			&:nth-child(1) {
				margin-left: 0rpx
			}

			image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50rpx;
			}
		}
	}

	.noCenter {
		justify-content: flex-start;
	}

	.outBox {
		display: flex;
		flex-direction: column;
	}

	.innerCont {
		display: flex;
		flex-direction: column;
		padding: 32rpx;
		overflow: hidden;
		// overflow-y: scroll;

		.items {
			flex: 1;

			.item {
				width: 100%;
				padding: 46rpx 40rpx;
				box-sizing: border-box;
				margin-bottom: 18rpx;
				// border: 7rpx solid #fff;
				border-radius: 50rpx;
				height: 720rpx;
				background-size: 100% 100%;

				.top {
					// display: flex;
					// justify-content: space-between;

					.left {
						.title {
							font-weight: 400;
							font-size: 60rpx;
							color: #000000;
							margin-top: 258rpx;
							line-height: 72rpx;
							text-stroke: 5px #FFFFFF;
							text-align: center;
							font-style: normal;
							font-family: 'chunlian';
							text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
						}

						.time {
							font-weight: 500;
							font-size: 28rpx;
							color: #86909C;
							line-height: 28rpx;
							text-align: left;
							font-style: normal;
							margin-bottom: 26rpx;
							display: flex;
							justify-content: center;

							.price {
								color: #fff;
								margin-right: 20rpx;
							}

						}
					}

					.stateBox {
						margin: 28rpx 0;
						display: flex;
						justify-content: center;
					}

					.state {
						width: 100rpx;
						height: 40rpx;
						border-radius: 14rpx;
						background: rgba(255, 96, 72, .3);
						border: 2rpx solid #FF6048;
						display: flex;
						align-content: center;
						justify-content: center;

						text {
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 24rpx;
							color: #FF6048;
						}
					}
				}
			}

		}
	}

	.left-slot {
		color: #fff;
		display: flex;
		align-items: center;

		image {
			width: 40rpx;
			margin-right: 30rpx;
		}
	}
</style>